<template>
  <div class="page">
    <Navbarelder title="项目预警" />
    <div class="content">
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <van-empty v-if="!tableData.length" description="暂无数据" />
        <div class="list">
          <div
            v-for="(item,index) in tableData"
            :key="index"
            class="list-item"
          >
            <div class="header f-r j-b a-c">
              <div class="title">{{ item.projectName }}</div>
            </div>
            <div class="label">
                项目类型{{ item.projectType }}
            </div>
            <div class="label">
              预期类型： {{ getstatus[item.warningStatus] }}
            </div>
            <div class="label">
              预期事项：
            </div>
            <div class="warnbox" :class="['warnbox'+item.warningStatus]">
                <div class="label" style="height: auto;margin-bottom: 8px !important;">
              {{ stage[item.stage] }}：{{ item.productName }}
            </div>
            <div class="label">
              发布（{{ item.startTime }} - {{ item.endTime }}）
            </div>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>
  
<script>
import refresh from '@/mixins/refresh'
import { http_warning } from '@/api'
import { Toast } from 'vant'
export default {
  name: 'Project',
  mixins: [refresh],
  data() {
    return {
      filterIcon: require('@/assets/home/filter.png'),
      tableData: [
      ],
      getstatus: ['正常', '临期', '超期'],
      stage: ['', '项目立项阶段', '规划许可阶段', '施工许可阶段', '竣工验收阶段', '竞标']
    }
  },
  methods: {
    onRefresh() {
      this.pageNo = 1
      this.getList()
    },
    getList() {
      if (this.pageNo > 1 && this.tableData.length >= this.totalSize) return Toast('没有更多了')
      http_warning.page({
        ...this.getQueryParams()
      }).then(res => {
        if (this.pageNo === 1) {
          this.tableData = res.data.records.map(el => {
            return {
              ...el
            }
          })
        } else {
          this.tableData = [
            ...this.tableData,
            ...res.data.records.map(el => {
              return {
                ...el
              }
            })
          ]
        }
        this.totalSize = res.data.total
        this.refreshLoading = false
      })
    }
  }
}
</script>
  
  <style scoped lang="scss">
  .page {
      .search-header {
          background-color: #fff;
          padding: 10px 0;
          padding-right: 0.32rem;
          .filter-box {
              flex-shrink: 0;
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #333333;
          }
      }
      .list-item {
          width: 100%;
          background: #FFFFFF;
          border-radius: 10px;
          padding: 20px;
          margin-bottom: 20px;
          .header {
              .title {
                  // height: 17px;
                  font-size: 22px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #333333;
                  margin-right: 10px;
              }
              margin-bottom: 23px;
          }
          .label {
              font-size: 19px;
              line-height: 19px;
              height: 19px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
              margin-bottom: 20px;
          }
          ::v-deep .el-step {
              .el-step__title {
                  width: 60px;
                  font-size: 16px;
                  line-height: 19px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #999999;
                  margin-top: 5px;
              }
          }
      }
  }
  .warnbox0{
    border: 2px solid #F20909;
    background: #FECCCC;
    color: #F20909;
    padding: 10px 18px 0px 18px;
    border-radius: 5px;
    .label{
        color: #F20909 !important;
        margin-bottom: 15px !important;
        line-height: 22px !important;
    }
  }
  .warnbox1{
    border: 2px solid #F28209;
    background: #FFE1C0;
    color: #F28209;
    padding: 10px 18px 0px 18px;
    border-radius: 5px;
    .label{
        color: #F28209 !important;
        margin-bottom: 15px !important;
        line-height: 22px !important;
    }
  }
  .warnbox2{
    border: 2px solid #F20909;
    background: #FECCCC;
    color: #F20909;
    padding: 10px 18px 0px 18px;
    border-radius: 5px;
    .label{
        color: #F20909 !important;
        margin-bottom: 15px !important;
        line-height: 22px !important;
    }
  }
  </style>
  